<template>
  <div class="shop-pages">
    <div class="flex flex-wrap link-list">
      <div
        class="link-item border border-br px-5 py-[5px] rounded-[3px] cursor-pointer mr-[10px] mb-[10px]"
        v-for="(item, index) in linkList"
        :class="{
          'border-primary text-primary':
            modelValue.path == item.path && modelValue.name == item.name,
        }"
        :key="index"
        @click="handleSelect(item)"
      >
        {{ item.name }}
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import type { PropType } from "vue";
import { mobileLink, pcLink, type Link } from ".";

const props = defineProps({
  modelValue: {
    type: Object as PropType<Link>,
    default: () => ({}),
  },
  type: {
    type: String as PropType<"mobile" | "pc">,
    default: "mobile",
  },
  isTab: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits<{
  (event: "update:modelValue", value: Link): void;
}>();

const linkList = computed(() =>
  props.type == "mobile"
    ? mobileLink.filter((item) => (props.isTab ? item.canTab : true))
    : pcLink
);

const handleSelect = (value: Link) => {
  emit("update:modelValue", value);
};
</script>
